<script>

export default {
  name: "ScrollViewEx",
  props: {
    heightOffset: {
      type: Number,
      default: 0
    },
  },
  emits: ['bottom'],
  data() {
    return {};
  },
  computed: {
    listStyle() {
      let style = {}
      // 如果没有定义列表高度，则默认使用屏幕高度
      let {windowHeight} = uni.getWindowInfo() || {}
      console.log(windowHeight)
      if (!style.height) style.height = (windowHeight - this.heightOffset) + 'px'
      return style
    }
  },
  methods: {
    onScroll(e) {
      let scrollTop = 0
      // #ifdef APP-NVUE
      scrollTop = e.contentOffset.y
      // #endif
      // #ifndef APP-NVUE
      scrollTop = e.detail.scrollTop
      // #endif
      this.innerScrollTop = scrollTop
      this.$emit('scroll', Math.abs(scrollTop))
    },
    // 滚动到底部触发事件
    scrolltolower(e) {
      setTimeout(() => {
        this.$emit('bottom')
      }, 30)
    },
  },
}
</script>

<template>
  <scroll-view
    :style="[listStyle]"
    :enable-back-to-top="true"
    scroll-y
    @scroll="onScroll"
    @scrolltolower="scrolltolower"
  >
    <slot></slot>
  </scroll-view>
</template>

<style scoped lang="scss">

</style>
